<template>
    <div>
      <el-select multiple v-model="valueSupervisionStation" filterable placeholder="请选择监督站" @remove-tag="removeTagSupervisionStation" @clear="clearall" clearable style="width: 100%">
        <div class="all-box"><el-checkbox v-model="checkAll" @change="handleCheckAll">全选</el-checkbox></div>
        <el-option :value="selectTreeSupervisionStation" disabled hidden />
        <el-tree ref="treeSupervisionStation"
                 :data="treeDataSupervisionStation"
                 :props="defaultProps"
                 :node-key="defaultProps.value"
                 default-expand-all
                 :default-checked-keys="defaultCheckedSupervisorIds"
                 show-checkbox
                 check-strictly
                 check-on-click-node
                 @check-change="handleNodeSupervisionStation(false)" />
      </el-select>
    </div>
</template>

<script>
export default {
  name: "selectMulCom",
  props:{
    selectIds:{
      type:Array
    }
  },
  data(){
    return{
      valueSupervisionStation: [],
      selectTreeSupervisionStation: [],
      treeDataSupervisionStation: [],
      defaultCheckedSupervisorIds: [],
      defaultProps: {
        value: "id",
        label: "title",
        children: "children",
      },
      checkAll: false,
    }
  },
  methods:{
    removeTagSupervisionStation(val) {
      this.checkAll = false //监督站只要点一个移除，全选按钮就是非勾选状态
      let supervisionStationIds = this.form.supervisionStationIds.split(",")
      let supervisionStationTitles = this.form.supervisionStationTitles.split(",")
      let idIndex = supervisionStationTitles.findIndex((old) => val === old)
      supervisionStationIds.splice(idIndex, 1)
      this.form.list.splice(idIndex, 1)
      this.$refs.treeSupervisionStation.setCheckedKeys(supervisionStationIds)
    },
    handleNodeSupervisionStation(cancelAll) {
      let datalist = []
      let idsList = []
      if (!cancelAll) {
        // 只要不是取消全选择，是全选或者勾选都要获取节点node和节点key
        datalist = this.$refs.treeSupervisionStation.getCheckedNodes()
        idsList = this.$refs.treeSupervisionStation.getCheckedKeys()
      }
      this.valueSupervisionStation = []
      this.form.list = []
      datalist.forEach((item) => {
        this.valueSupervisionStation.push(item.title)
        this.form.list.push({ supervisorId: item.id, supervisorName: item.title })
      })
      this.form.supervisionStationIds = idsList.join(",")
      this.form.supervisionStationTitles = this.valueSupervisionStation.join(",")

      //所有监督站平级，如果监督站个数等于勾选的监督站,全选勾选，否则取消勾选
      if (this.treeDataSupervisionStation.length == datalist.length) {
        this.checkAll = true
      } else {
        this.checkAll = false
      }
    },
    handleCheckAll(val) {
      if (val) {
        let defaultIds = this.treeDataSupervisionStation.map((item) => {
          return item.id
        })
        this.defaultCheckedSupervisorIds = defaultIds
      } else {
        this.$refs.treeSupervisionStation.setCheckedKeys([])
        this.defaultCheckedSupervisorIds = []
      }
    },
  }
}
</script>

<style scoped>

</style>